import React, { useState } from 'react';
import { Card, Tabs, Form, Input, Button, Upload, message, Avatar, Typography, Divider } from 'antd';
import { UserOutlined, MailOutlined, PhoneOutlined, LockOutlined, UploadOutlined } from '@ant-design/icons';
import type { TabsProps } from 'antd';
import type { UploadProps } from 'antd';

const { Title, Paragraph } = Typography;

interface UserInfo {
    name: string;
    email: string;
    phone: string;
    avatar: string;
}

const UserProfile: React.FC = () => {
    // 模拟用户数据
    const [userInfo, setUserInfo] = useState<UserInfo>({
        name: '管理员',
        email: 'admin@example.com',
        phone: '13800138000',
        avatar: '',
    });

    // 个人信息表单提交
    const handleProfileSubmit = (values: any) => {
        setUserInfo({
            ...userInfo,
            ...values,
        });
        message.success('个人信息更新成功！');
    };

    // 密码表单提交
    const handlePasswordSubmit = (values: any) => {
        console.log('密码修改:', values);
        message.success('密码修改成功！');
    };

    // 头像上传
    const uploadProps: UploadProps = {
        name: 'avatar',
        showUploadList: false,
        beforeUpload: (file) => {
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
            if (!isJpgOrPng) {
                message.error('只能上传JPG/PNG格式的图片!');
                return false;
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                message.error('图片必须小于2MB!');
                return false;
            }

            // 模拟上传成功后的头像URL
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => {
                setUserInfo({
                    ...userInfo,
                    avatar: reader.result as string,
                });
                message.success('头像上传成功！');
            };
            return false;
        },
    };

    const items: TabsProps['items'] = [
        {
            key: '1',
            label: '个人资料',
            children: (
                <div style={{ padding: '20px 0' }}>
                    <div style={{ textAlign: 'center', marginBottom: 30 }}>
                        <Avatar
                            size={100}
                            icon={<UserOutlined />}
                            src={userInfo.avatar}
                        />
                        <div style={{ marginTop: 10 }}>
                            <Upload {...uploadProps}>
                                <Button icon={<UploadOutlined />}>更换头像</Button>
                            </Upload>
                        </div>
                    </div>

                    <Form
                        layout="vertical"
                        initialValues={userInfo}
                        onFinish={handleProfileSubmit}
                        style={{ maxWidth: 500, margin: '0 auto' }}
                    >
                        <Form.Item
                            label="用户名"
                            name="name"
                            rules={[{ required: true, message: '请输入用户名!' }]}
                        >
                            <Input prefix={<UserOutlined />} placeholder="用户名" />
                        </Form.Item>

                        <Form.Item
                            label="邮箱"
                            name="email"
                            rules={[
                                { required: true, message: '请输入邮箱!' },
                                { type: 'email', message: '请输入有效的邮箱地址!' }
                            ]}
                        >
                            <Input prefix={<MailOutlined />} placeholder="邮箱" />
                        </Form.Item>

                        <Form.Item
                            label="手机号"
                            name="phone"
                            rules={[
                                { required: true, message: '请输入手机号!' },
                                { pattern: /^1\d{10}$/, message: '请输入有效的手机号!' }
                            ]}
                        >
                            <Input prefix={<PhoneOutlined />} placeholder="手机号" />
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit" block>
                                保存修改
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            ),
        },
        {
            key: '2',
            label: '修改密码',
            children: (
                <div style={{ padding: '20px 0' }}>
                    <Form
                        layout="vertical"
                        onFinish={handlePasswordSubmit}
                        style={{ maxWidth: 500, margin: '0 auto' }}
                    >
                        <Form.Item
                            label="当前密码"
                            name="oldPassword"
                            rules={[{ required: true, message: '请输入当前密码!' }]}
                        >
                            <Input.Password prefix={<LockOutlined />} placeholder="当前密码" />
                        </Form.Item>

                        <Form.Item
                            label="新密码"
                            name="newPassword"
                            rules={[
                                { required: true, message: '请输入新密码!' },
                                { min: 6, message: '密码长度至少6位!' }
                            ]}
                        >
                            <Input.Password prefix={<LockOutlined />} placeholder="新密码" />
                        </Form.Item>

                        <Form.Item
                            label="确认新密码"
                            name="confirmPassword"
                            rules={[
                                { required: true, message: '请确认新密码!' },
                                ({ getFieldValue }) => ({
                                    validator(_, value) {
                                        if (!value || getFieldValue('newPassword') === value) {
                                            return Promise.resolve();
                                        }
                                        return Promise.reject(new Error('两次输入的密码不一致!'));
                                    },
                                }),
                            ]}
                        >
                            <Input.Password prefix={<LockOutlined />} placeholder="确认新密码" />
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit" block>
                                修改密码
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            ),
        },
    ];

    return (
        <div>
            <Title level={2}>用户信息</Title>
            <Paragraph>在这里查看和修改您的个人信息</Paragraph>
            <Divider />

            <Card>
                <Tabs defaultActiveKey="1" items={items} />
            </Card>
        </div>
    );
};

export default UserProfile; 